<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript"></script>
    <script>
        var interval;
        var g_x = 0;
        var x = 0;
        var y = 10;
        var data = [];  //y
        var list = [];  //x
        var stopDraw = false
        var global_status = 0;//加载页面时默认为0
        var global_ts = 0;
        var ws = new WebSocket("ws://192.168.0.108"); 
        //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
        ws.onopen = function(){
        　　//当WebSocket创建成功时，触发onopen事件
            console.log("open");
            ws.send("hello"); //将消息发送到服务端
        }
        var myChart;
        var frame_timestamp = new Date().getTime();

        var first = 0;
        var onmessageId = 0;
        ws.onmessage = function(e){
        　　//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
            var profile_ts = new Date().getTime();
            onmessageId++;
            //console.log("onmessage ",onmessageId, e.data, e.data.arrayBuffer()," ts span:", new Date().getTime() - frame_timestamp, "ms");
            console.log("onmessage ",onmessageId,"ts span:", new Date().getTime() - frame_timestamp, "ms");
            frame_timestamp = new Date().getTime();
            let promise = e.data.arrayBuffer().then((msgArrayBuffer)=>{
                console.log("onmessage ", onmessageId, " t0:", new Date().getTime() - profile_ts, "ms");
                var buf = new Float32Array(msgArrayBuffer);

                // data.push(buf);
                console.log("onmessage ", onmessageId, " t1:", new Date().getTime() - profile_ts, "ms");
                //
                var i;
                var ldata = []
                for ( i = 0; i < buf.length; i+=3) {
                    //Line_append(g_x++, buf[i]);
                    ldata.push(buf[i]);
                    data.push(buf[i]);
                    list.push(g_x++);
                };
                console.log("onmessage  ", onmessageId, "t2:", new Date().getTime() - profile_ts, "ms");
            });
            console.log("onmessage  ", onmessageId, "t3:", new Date().getTime() - profile_ts, "ms");
        }
        ws.ondata = function(e){
        　　//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
        　　console.log("ondata", e.data);
        }
        ws.onclose = function(e){
        　　//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
        　　console.log("close");
        }
        ws.onerror = function(e){
        　　//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
        　　console.log(error);
        }
 
        function Chart_append(data) {
            // myChart.resize();
            myChart.appendData({
                seriesIndex: 0,
                data
            });
            //myChart.appendData({
            //    seriesIndex: 1,
            //    data : data
            //});
            myChart.resize();
        }

        function Line_update() {
            var option = {
                xAxis : [
                {
                    data : list
                }
            ],
            series : [
                {
                    data:data,
                },
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function Line_append(x_value,y_value) {
            // 基于准备好的dom，初始化echarts实例
            data.push(y_value);
            list.push(x_value);
            // 指定图表的配置项和数据
            var option = {
                xAxis : [
                    {
                        data : list
                    }
                ],
                series : [
                    {
                        data:data
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
 
        function initChartData() {
            // 基于准备好的dom，初始化echarts实例
            myChart = echarts.init(document.getElementById('main_chart'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'Line Chart',
                    animation: false
                },
                backgroundColor: '#FFFFFF',
                legend: {
                    data:['Loss']
                },
                tooltip : {//鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置
                trigger: 'axis'
                },
                toolbox: {
                    feature: {
                      dataZoom: {
                        yAxisIndex: 'none'
                      },
                      restore: {},
                      saveAsImage: {}
                    }
                },
                dataZoom: [
                    {
                      type: 'inside',
                      start: 0,
                      end: 100  //100%
                    },
                    {
                      start: 0,
                      end: 100
                    }
                ],
                calculable : true,
                xAxis : [
                    {
                        axisLine:{
                            lineStyle :{
                                color: '#CCCCCC'
                            }
                        },
                        type : 'category',
                        boundaryGap : true, //不从0刻度开始
                        // data:list,  // X轴的定义
                        data : list                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine:{
                            lineStyle :{
                                color: '#CCCCCC'
                            }
                        }
                     }
                ],
                series : [
                    {
                        name:'P',
                        type:'line',
                        // symbol:'none',//原点
                        // smooth: true,//弧度
                        color:['#66AEDE'],
                        // data:Y轴数据
                        data:[],
                        sampling: 'lttb',//降采样策略
                        seriesIndex: 0,
                        large: true,
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option, true);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        var interval;
        $(function(){
            $("#start").click(function(){
                initChartData();
                global_ts = new Date().getTime();
                //interval = setInterval(refresh,100);
                interval = setInterval(Line_update,300);
                ws.send("setRepeatRequest");
                stopDraw = false
            });
        });
 

        $(function(){
            $("#stop").click(function(){
                ws.send("stopRepeatRequest");
                stopDraw = true
            });
        });
 
    </script>
</head>
<body>
    <div id="status"> None </div>
    <button id="start">开始绘制</button>
    <button id="stop">停止绘制</button>
    <div id="main_chart" style="width: 100%;height:400px;"></div>
</body>
</html>